
;(function () {
	
	// 注册一个全局自定义指令 'v-focus'
	Vue.directive('focus', {
		// 当绑定的元素插入到DOM中时
		inserted: function(el) {
			// 聚焦元素
			el.focus();
		}
	})

	Vue.directive('todo-focus', {
		update (el, binding) {
			if(binding.value) {
				el.focus();
			}
		}
	})

	window.app = new Vue({
		data: {
			todos: JSON.parse(window.localStorage.getItem('todos') || '[]'),
			currentEditing: null,
			filterText: 'all'
			
		},
		computed: {
			remainingCount() {
				return this.todos.filter(t => !t.completed).length
			},
			filterTodos() {
				switch(this.filterText) {
					case 'active': 
						return this.todos.filter(t => !t.completed)
						break;
					case 'completed':
						return this.todos.filter(t => t.completed)
					default: 
						return this.todos
						break;

				}
			}
		},
		watch: {
			todos: {
				handler(val, oldval) {
					// 存储数据
					window.localStorage.setItem('todos', JSON.stringify(val ));
				},
				deep: true
			}
		},
		methods: {
			handleNewTodoKeyDown(e) {
				// 0. 注册按下的回车事件
				// 1. 获取文本框的内容
				// 2. 数据校验
				// 3. 添加到todos列表
				const value = e.target.value.trim();
				// console.log(value)
				if(!value.length) {
					return
				}
				const todos = this.todos;
				todos.push({
					// 如果数组是空的就给1，否则就是最后一个元素的id+1
					id: todos.length ? todos[todos.length - 1].id + 1 : 1,
					title: value,
					completed: false
				})
				
				e.target.value = ''
			},
			handleToggleAllChange(e) {
				// 1. 绑定 checkbox 的 change 事件
				// 2. 获取 checkbox 的选中的状态
				// 3. 直接循环所有的子任务项的选中状态设置为 toggleAll的状态
				const checked = e.target.checked;
				this.todos.forEach(item => {
					item.completed = checked;
				});
			},
			handleRemoveTodoClick(index, e) {
				this.todos.splice(index, 1)
			},
			handleGetEditingDblclick(todo) {
				this.currentEditing = todo
			},
			handleSaveEditKeydown(todo, index, e) {
				const value = e.target.value.trim();
				// 数据被编辑为空的了， 直接删除
				if(!value.length) {
					this.todos.splice(index, 1)
				} else {
					todo.title = value;
					this.currentEditing = null;
				}
				
			},
			handleCancelEdiEsc() {
				// 1. 把样式给去除就可以了
				this.currentEditing = null;
			},
			handleClearAllDoneClick() {
				for(let i=0; i<this.todos.length; i++) 
					if(this.todos[i].completed) {
						this.todos.splice(i, 1)
						i--;
					}
			}
		}
	}).$mount('#app')

// 页面初始化的时候调用一次，保持路由状态
handlehashchange();

	// 注册 hash (锚点) 的改变事件
window.onhashchange = handlehashchange;



function handlehashchange() {
	app.filterText = window.location.hash.substr(2)
}


})()